<template>
    <div class="result">
        <header>
            <h2>你已超越 <span class="font_red">{{ defeat }}</span> 个妈妈</h2>
            <img class="zmy" v-bind:src="zmy" alt="">
            <div class="num_count">{{num_count}}</div>
        </header>
        <section class="build">
            <h3>我的妈妈三力图</h3>
            <div class="chart">
                <canvas id="myChart"></canvas>
            </div>
            <div class="build_desc">
                <ul v-for="item in dim_list">
                    <li class="build_title">{{item.dim_name}}</li>
                    <li v-for="item2 in item.children">{{item2.dim_name}}：<span :class="item2.average==2?'font_red2':''">{{item2.number?item2.number:'-'}}</span></li>
                </ul>
                <div class="clear"></div>
            </div>
        </section>
        <section class="analyze">
            <h3>我的妈妈能力分析</h3>
            <div class="analyze_desc">
                <h4 class="analyze_title">妈妈优势</h4>
                <p v-for="(item,index) in sup_list">{{ index + 1 }}.{{item}}</p>
                <h4 class="analyze_title mar_top"  v-if="is_self" >努力方向</h4>
                <div class="analyze_list">
                    <p v-for="(item,index) in eff_list" show="1">{{ index + 1 }}.{{item}}</p>
                </div>
                <div class="else" v-if="is_self" @click="show_analyze" style="">（以下部分仅本人可见） <img src="static/images/down.png" alt=""></div>
            </div>
        </section>
        <section class="scheme" v-if="is_self">
            <h3>麻麻説建议</h3>
            <div class="scheme_desc">
                <div class="course">
                    <div class="course_logo">
                        <img v-bind:src="headimgurl" >
                    </div>
                    <div class="course_content" v-html="offer">
                        {{offer}}
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </section>
        <section class="scheme sc_self" v-if="!is_self">
            <div class="scheme_desc no_self">
                <p><span>努力方向</span>以及<span>完整报告</span>仅为本人可见。</p>
                <br/>
                <p><span>完整报告</span>包括：</p>
                <p>· 你的「妈妈力」详析</p>
                <p>· 妈妈力资源包</p>
                <p>· 妈妈提升计划行动指南</p>
            </div>
        </section>
        <section v-if="is_self" >
            <div class="move" @click="shade">分享给更多妈妈 >></div>
            <div class="move" @click="report">获取完整报告 >></div>
            <!--<img src="static/images/report.png" alt="">-->
            <div class="report_text">• 妈妈力资料包&提升行动指南<br>• 「妈妈力」详析   • 仅8.8元 </div>
        </section>
        <div class="hr"></div>
        <footer>
            <!--<img class="footer_er" src="static/images/res_bottom_text.gif" alt="">-->
            <div class="footer_er">
                <p>
                    有用的妈妈知识<br>有趣的活动形式
                </p>
                <p>
                    欢迎了解妈妈共创计划！
                </p>
            </div>

            <a class="footer_text" href="http://mp.weixin.qq.com/s/r-63dJhiWYJVB79I4SggdA">麻麻共创营：这可能是最有趣的妈妈教育！</a>
            <img class="footer_logo" src="static/images/res_logo.gif" alt="">
        </footer>
        <div class="shade" @click="shade_none">
            <img src="static/images/share_img.png" class="shade_img" alt="">
        </div>
        <img class="top_logo" src="static/images/logo.png" alt="">
        <a href="index.php" class="about" v-if="!is_self">我也要做题</a>
    </div>
</template>
<script>
    export default {
        name: 'result',
        data () {
            return {
                an_id: 0,//答题id
                dim_list: {},//雷达下方的维度列表
                radar_list: {},//输出在雷达的维度列表
                answer_info: {},//答题的详细信息
                eff_list: {},//妈妈优势
                sup_list: {},//努力方向
                num_count: {},//总分
                defeat: 0,//打败妈妈数
                offer: '',//建议
                is_self: false,//是否是本人
                appellation : '',//最优维度的称呼
                zmy: '',//最大维度的字幕云图`
                headimgurl: '',//用户微信头像
                move: true, //努力方向显示按钮
            }
        },
        mounted () {
            sessionStorage.setItem("is_topic",1)
            setTimeout( e => {

                //获取答案id
                this.an_id = sessionStorage.getItem("an_id")
//this.an_id = 9

                //请求获取该问卷结果
                var url = this._API_ + "answer?an_id=" + this.an_id
                this.$http.get(url).then( e => {

                    this.dim_list = e.data.dim_list
                    this.radar_list = e.data.radar_list
                    this.answer_info = e.data.answer_info
                    this.eff_list = e.data.eff_list
                    this.sup_list = e.data.sup_list
                    this.num_count = e.data.num_count
                    this.defeat = e.data.defeat
                    this.offer = e.data.offer
                    this.appellation = e.data.appellation
                    this.zmy = e.data.dim_result_img
                    this.headimgurl = e.data.headimgurl
                    setTimeout(function (){
                        $('.analyze_list p').css("height",'0px')
                    },2000)


                    //分享
                    var url = this._API_ + "setting"
                    this.$http.get(url).then( e => {
                        this.content = e.data[5].set_value
                        var set_data = e.data
                        var wxtitle = this.appellation + ",我超越了" + this.defeat + "位妈妈"
//                    var wxtitle = set_data[3].set_value
                        var wxdesc = set_data[2].set_value
                        var wximg = "http://assessment.mumtalks.cn/" + set_data[1].set_value
                        var wxurl = set_data[0].set_value + "?an_id=" + this.an_id
                        wx.config({
                            debug: false,
                            appId: localStorage.getItem("appId"),
                            timestamp: localStorage.getItem("timestamp"),
                            nonceStr:  localStorage.getItem("nonceStr"),
                            signature: localStorage.getItem("signature"),
                            jsApiList: [
                                // 所有要调用的 API 都要加到这个列表中
                                "hideMenuItems",
                                'checkJsApi',
                                'openLocation',
                                'getLocation',
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                "menuItem:share:qq",
                                "menuItem:openWithSafari",
                            ]
                        });

                        wx.ready(function () {
                            wx.checkJsApi({
                                jsApiList: [
                                    'getLocation',
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage'
                                ],
                                success: function (res) {

                                }
                            });

                            //批量隐藏功能
                            wx.hideMenuItems({
                                menuList: ['menuItem:share:qq',"menuItem:openWithSafari","menuItem:share:QZone","menuItem:copyUrl"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
                            });
                            wx.onMenuShareAppMessage({
                                title: wxtitle,
                                desc: wxdesc,
                                link: wxurl,
                                imgUrl: wximg,
                                trigger: function (res) {
                                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                                    // alert('用户点击发送给朋友');
                                },
                                success: function (res) {
                                    // alert('已分享');
                                },
                                cancel: function (res) {
                                    // alert('已取消');
                                },
                                fail: function (res) {
                                    // alert(JSON.stringify(res));
                                }
                            });
                            wx.onMenuShareTimeline({
                                title: wxtitle,
                                link: wxurl,
                                imgUrl: wximg,
                                trigger: function (res) {
                                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                                    // alert('用户点击分享到朋友圈');
                                },
                                success: function (res) {
                                    // alert('已分享');
                                },
                                cancel: function (res) {
                                    // alert('已取消');
                                },
                                fail: function (res) {
                                    // alert(JSON.stringify(res));
                                }
                            });
                        })
                    })





                    //判断是否是本人
                    console.log(this.headimgurl)
                    console.log(localStorage.getItem("headimgurl"))
                    console.log(this.headimgurl == localStorage.getItem("headimgurl"))
                    if( this.headimgurl == localStorage.getItem("headimgurl") )
                    {
                        this.is_self = true
                    }
                    else
                    {
                        this.is_self = false
                        $(".analyze_desc").css('padding-bottom',"10px")
                    }

                    //循环输出雷达图上的数据
                    var labels = [];//显示名称
                    var label_maxnum = [];//最大分数
                    var radar_number = [];//显示雷达维度分数
                    var be = 1 ;
                    for( var i in this.radar_list )
                    {
                        //这里写死了，因为他只调用三个，如果以后要增加， 就控制这个值
                        if( be <= 3 )
                        {
                            be++ ;
                            labels.push( this.radar_list[i].dim_name )
                            label_maxnum.push( this.answer_info.qu_radar_number )
                            var number = this.radar_list[i].radar_number > this.answer_info.qu_radar_number ? this.answer_info.qu_radar_number : this.radar_list[i].radar_number
                            radar_number.push( number )

                        }
                    }

                    //雷达图
                    var radarChartData = {
                        labels: labels,
                        datasets: [
                            {
                                label: "",
                                fillColor: "rgba(0,0,0,0)",
                                strokeColor: "rgba(0,0,0,0)",
                                pointColor: "rgba(0,0,0,0)",
                                pointStrokeColor: "rgba(0,0,0,0)",
                                pointHighlightFill: "rgba(0,0,0,0)",
                                pointHighlightStroke: "rgba(0,0,0,0)",
                                data: label_maxnum
                            },
                            {
                                label: "",
                                fillColor: "rgba(0,0,0,0)",
                                strokeColor: "rgba(0,0,0,0)",
                                pointColor: "rgba(0,0,0,0)",
                                pointStrokeColor: "rgba(0,0,0,0)",
                                pointHighlightFill: "rgba(0,0,0,0)",
                                pointHighlightStroke: "rgba(0,0,0,0)",
                                data: label_maxnum
                            },
                            {
                                label: "变形玩具金刚4",
                                fillColor: "rgba(255 ,142 ,166 ,0.80)",//中间黄色块状的颜色
                                strokeColor: "rgba(227,211,201,0.6)",
                                pointColor: "rgba(255,95,1,0)",
                                pointStrokeColor: "rgba(0,0,0,0)",//圆点边框
                                pointHighlightFill: "#ff5f01",
                                pointHighlightStroke: "rgba(200,76,4,0.8)",
                                data: radar_number
                            }
                        ]
                    };
                    window.myRadar = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, {
                        responsive: true
                    });

                })


            },500)
        },
        components : {

        },
        methods : {
            shade (e) {
                $('.shade').show()
            },
            shade_none ( e ) {
                $('.shade').hide()
            },
            show_analyze ( e ) {
                if( this.move )
                {
                    this.move = false
//                    $('.analyze_list p').css({"height":"auto","font-size":"14px"})  当点击显示其他分析时
                    var sUserAgent = navigator.userAgent.toLowerCase();
                    var isIphone = sUserAgent.match(/iphone/i) == "iphone";
                    var isAndroid = sUserAgent.match(/android/i) == "android";
                    if(isAndroid){

                    }
                    if(isIphone){

                    }
                    $('.analyze_list p').css({"height":"auto"})
                    $('.else img').css("transform","rotate(180deg)")
                }
                else
                {
                    this.move = true
                    $('.analyze_list p').attr("style","height:0px")
                    $('.else img').attr("style","")

                }
            },
            report ( e ) {

                if( this.is_self )
                {


                    if( this.answer_info.an_pay == 1 )
                    {


                        //如果已经支付

                        sessionStorage.setItem("an_id",this.an_id)
                        setTimeout( e => {
                            // location.href = "/#/Coding"
                            this.$router.push({name: 'Coding'})
                            // location.href = location.href
                        },300)

                    }
                    else
                    {

                        sessionStorage.setItem("an_id",this.an_id)
                        //如果没支付
                        setTimeout( e => {
                            // location.href = "/#/Pay"
                            this.$router.push({name: 'Pay'})
                            // location.href = location.href
                        },300)

                    }

                }
                else
                {
                    location.href = "index.php"
                }
            }
        }

    }
</script>

<style scoped>
    .font_red2{
        color:#f00;
    }
    .report_text{
        text-align:left;
        height:180px;
        line-height:50px;
        font-size:3rem;
        color:#393939;
        padding-left:120px;
        padding-top:50px;
        background:url('../../static/images/jianto.jpg') no-repeat center 10px;
    }
    .no_self p{
        font-size:1.7rem;
        color:#393939;
    }
    .no_self span{
        color:#f05c78;
        font-size:2.2rem;
    }
    @font-face{
        font-family: moniTreeFont;
        src:url("../../static/font/miniyb.ttf");
    }
    @font-face{
        font-family: hoverTreeFont;
        src:url("../../static/font/zzgf.otf");
    }
    .no_self{
        padding:20px;
        font-size:2rem;
        line-height: 3rem;
        color:#393939;
    }
    .top_logo{
        position: absolute;
        top:18px;
        right:30px;
        width:122px;
    }
    .else{
        position:absolute;
        bottom:0px;
        width:690px;
        height:55px;
        border-top:1px dashed #f26f88;
        color:#f05c78;
        font-size:2.6rem;
        line-height:55px;
        text-align: center;
    }
    .analyze_list{
        /*height:360px;*/
        /*overflow: hidden;*/
    }
    .analyze_list p{
        /*height:0px;*/
        overflow: hidden;
    }
    .shade_img{
        position:absolute;
        top:30px;
        right:50px;
        width:300px;
    }
    .shade{
        width:750px;
        height:1350px;
        background:rgba(0,0,0,0.8);
        position: fixed;
        top:0px;
        display: none;
    }
    .move{
        height: 93px;
        color: #fff;
        font-size: 3.8rem;
        background-color: #f05c78;
        width: 750px;
        text-align: center;
        line-height: 93px;
        text-decoration: none;
        margin-top:20px;
    }
    .zmy{
        width:750px;
    }
    .num_count{
        position: absolute;
        top:222px;
        left:284px;
        font-size:4.6rem;
        color:#a9153f;
        width:152px;
        text-align: center;
        font-family: hoverTreeFont;
    }
    .font_red{
        color:#a9153f;
        font-size:3rem;
        font-family: hoverTreeFont;
    }
    .go_Paper{
        height:93px;
        color:#fff;
        font-size:3.8rem;
        background-color: #f05c78;
        position: fixed;
        bottom:0px;
        width:750px;
        text-align: center;
        line-height:93px;
        text-decoration: none;
    }
    footer{
        overflow: hidden;
        padding-bottom:118px;
    }
    .footer_er{
        display: block;
        margin:0px auto;
        margin-top:60px;
        margin-bottom:20px;
        text-align: center;
        font-size:3rem;
    }
    .footer_er p{
        font-weight: 300;
        font-family: "微软雅黑";
        color:#a9153f;
        margin-bottom:20px;
        line-height: 50px;
    }
    .footer_logo{
        display: block;
        margin:0px auto;
        margin-top:30px;
    }
    .footer_text{
        display: inline-block;
        text-align: center;
        font-size:3rem;
        color:#f05c78;
        margin-left:30px;
        text-decoration:underline;
    }
    header{
        position: relative;
    }
    .res_logo{
        position: absolute;
        top:18px;
        right:30px;
    }
    header h2{
    height:3rem;
    font-size:2.6rem;
    color:#eb511b;
    line-height:3rem;
    text-align: center;
    margin-top:27px;
    margin-bottom:24px;
    font-family: hoverTreeFont;
}
    .grade{
    width:355px;
    height:80px;
    margin:0px auto;
    background:url("../../static/images/grade_bg.gif") no-repeat center center;
    text-align: center;
    line-height: 80px;
    font-size:8rem;
    color:#d0415b;
}
    .grade_text{
        font-size:2.3rem;
        position:relative;
        bottom:14px;
    }
    .grade_position{
        height:26px;
        line-height:26px;
        font-size:2rem;
        color:#f05c78;
        text-align: center;
    }
    h3{
        height:61px;
        margin-left:30px;
        margin-top:18px;
        background:url("../../static/images/result_h3_bg.png") no-repeat left top;
        font-size: 3rem;
        color:#f05c78;
        line-height:61px;
        text-indent:32px;
        margin-bottom:48px;
        font-weight:bold;

    }
    .analyze h3,.scheme h3{
        margin-top:72px;
    }
    .build_desc {
        width:690px;
        /*height:178px;*/
        border:1px dashed #f26f88;
        margin:0px auto;
        padding:0px 30px;
        padding-bottom:15px;
        border-radius: 20px;
    }
    .build_desc ul{
        float: left;
        width:30%;
        margin-left:2%;
    }
    .build_desc ul:nth-child(3n){
        margin-right:0px;
    }
    .build_desc .build_title,.analyze_title{
        font-size:3rem;
        color:#f05c78;
        margin:18px 0px 10px 0px;
    }
    .mar_top{
        margin-top:72px;
    }
    .build_desc li {
        color:#393939;
        font-size:2rem;
        line-height:2.6rem;
        text-indent:8px;
    }
    .analyze_desc,.scheme_desc{
        width:690px;
        border:1px dashed #f26f88;
        margin:0px auto;
        padding-bottom:20px;
        padding-top:20px;
        border-radius:20px;
    }
    .analyze_title{
        text-indent:15px;
    }
    .analyze_desc p{
        color: #393939;
        font-size: 20px;
        line-height: 4.2rem;
        padding:0px 15px;
        margin-bottom:20px;
    }
    .analyze_desc{
        padding-bottom:55px;
        position: relative;
        border-radius: 20px;
    }
    .course div:not(.clear){
        float: left;
    }
    .course_logo{
        width:144px;
        height:110px;
        background:url("../../static/images/course_right_bg.png") no-repeat center right;
    }
    .course_logo img{
        display:block;
        margin:4px auto;
        width:100px;
    }
    .course_content{
        width:539px;
        padding:10px 16px;
        font-size:2rem;
    }
    .scheme_text{
        margin:20px 15px;
        font-size:2rem;
        color:#393939;
    }
    .course_content h4{
        font-size:2rem;
        color:#393939;
    }
    .course_content p{
        font-size:1.8rem;
        color:#393939;
    }
    .recommend h4{
        font-size:2rem;
        text-indent:15px;
        line-height:5rem;
        color:#393939;
    }
    .acitvity h4{
        font-size:2rem;
        text-indent:15px;
        line-height:5rem;
        color:#393939;
    }
    .acitvity p{
        color:#393939;
        font-size:2rem;
        line-height:3rem;
        text-indent:25px;
    }
    .acitvity{
        padding-bottom:15px;
    }
    .recommend p{
        color:#f05c78;
        line-height:3rem;
        font-size:2rem;
        text-indent:25px;
    }
    .recommend{
        padding:10px 0px;
        border-top:1px dashed #f26f88;
        border-bottom:1px dashed #f26f88;
        margin-top:15px;
    }
    .scheme{
        padding-bottom:30px;
    }
    .sc_self{
        margin-top:72px;
    }
    .hr{
        height:20px;
        background:#e4e4e4;
    }
    .about{
        height:93px;
        color:#fff;
        font-size:3.8rem;
        background-color: #f05c78;
        position: fixed;
        bottom:0px;
        width:750px;
        text-align: center;
        line-height:93px;
        text-decoration: none;
    }
</style>
